<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/303244 (zh-CN, DDL); Windows/10.0.14393 (Win64);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 12pt;
    }
  </style>
</head>
<body>
<a name="587"/>

<div>
<span><div><b>email控件（用于输入email，在移动端会自动切换成英文键盘，</b> <b><span style="color: black;">multiple</span><span style="color: black;">属性，允许在该文本框中输入一串以逗号分隔的</span><span style="color: black;">email</span><span style="color: black;">地址</span>）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;email&quot; required multiple&gt;</div><div><span style="color: rgb(255, 0, 0);">//required属性代表该输入项目不能为空</span></div></div><div><b><br/></b></div><div><b>url控件（用于输入url，在移动端会自动切换成英文键盘）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;url&quot;&gt;</div></div><div><b><br/></b></div><div><b>tel控件（用于输入电话号码，在移动端会自动切换成电话键盘）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;tel&quot;&gt;</div></div><div><b><br/></b></div><div><b>search控件（用输入搜索关键字，该控件带有清除文本值功能）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;search&quot;&gt;</div></div><div><b><br/></b></div><div><b>range控件（用于区间选择，max区间最大值，min区间最小值，step步长，value当前值）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;range&quot; max=&quot;100&quot; min=&quot;0&quot; value=&quot;50&quot; step=&quot;1&quot; oninput=&quot;console.log(this.value)&quot;&gt;</div><div><span style="color: rgb(255, 0, 0);">//oninput事件代表输入时触发，onchange事件代表数据改变并鼠标离开元素焦点时触发</span></div></div><div><b><br/></b></div><div><a name="568" style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"></a><div><b>number控件（用于输入数字，带由上下箭头可调整数字）</b></div></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;number&quot; max=&quot;10&quot; min=&quot;0&quot; value=&quot;4&quot; step=&quot;2&quot;&gt;</div></div><div><b><br/></b></div><div><b>color控件（用于选择颜色值）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;color&quot; value=&quot;#ffffff&quot;&gt;</div><div>//value值必须输入6位16进制的数值</div></div><div><b><br/></b></div><div><b>datetime-local控件（用于选择时间值）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;datetime-local&quot;&gt;</div></div><div><b><br/></b></div><div><b>time控件（用于选择时间值）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;time&quot;&gt;</div></div><div><b><br/></b></div><div><b>data控件（用于选择日期值）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;date&quot;&gt;</div></div><div><b><br/></b></div><div><b>week控件（用于选择周）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;week&quot;&gt;</div></div><div><b><br/></b></div><div><b>month控件（用于选择月）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;month&quot;&gt;</div></div><div><b><br/></b></div><div><a name="568" style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"></a><div><b>placeholder属性占位提示信息</b></div></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;password&quot; placeholder=&quot;请输入密码&quot;&gt;</div></div><div><b><br/></b></div><div><b>autofocus属性指定输入初始焦点</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;search&quot; autofocus&gt;</div></div><div><b><br/></b></div><div><b>list属性绑定数据列表（属性值：（datalist）数据列表ID）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;text&quot; list=&quot;dl1&quot;&gt;</div><div>&lt;datalist id=&quot;dl1&quot;&gt;</div><div>    &lt;option value=&quot;选项1&quot;&gt;</div><div>    &lt;option value=&quot;选项2&quot;&gt;</div><div>&lt;/datalist&gt;</div></div><div><b><br/></b></div><div><b>required属性指定输入元素为必填项</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;url&quot; required&gt;</div></div><div><b><br/></b></div><div><b>pattern属性正则验证（属性值：正则表达式）</b></div><div><b><br/></b></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;input type=&quot;tel&quot; placeholder=&quot;请输入电话&quot; pattern=&quot;\d{7,11}&quot; oninvalid=&quot;this.setCustomValidity('请输入数字')&quot; oninput=&quot;this.setCustomValidity('')&quot;&gt;</div><div><span style="color: rgb(50, 135, 18);">//oninvalid事件在校验失败时触发事件</span></div><div><span style="color: rgb(50, 135, 18);">//当校验失败时通过this.setCustomValidity()可以设置校验失败提示信息</span></div><div><span style="color: rgb(50, 135, 18);">//同时在输入数据时要使用this.setCustomValidity()将信息置空，否则会出现数据正确无法通过校验的情况</span></div></div><div><b><br/></b></div><div><b><br/></b></div><div><hr/></div><div><b><span style="font-size: 24px;"><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><br/></span></span></b></div><div><a name="571" style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"></a><div><span style="color: rgb(45, 79, 201);">css2中的属性选择器：</span></div></div><div>[attr]          匹配具有attr属性的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-abc]{</div><div>    color:red;</div><div>}</div></div><div><br/></div><div>[attr=val]   匹配attr属性值=val的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-abc=true]{</div><div>    color:blue;</div><div>}</div></div><div><br/></div><div>[attr~=val]   匹配attr使用空格分隔的属性值中一个值=val的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-abc~=false]{</div><div>    color:green;</div><div>}</div></div><div><br/></div><div>[attr|=val]   匹配attr使用连字符-分隔的属性值中一个值以val开头的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-abc|=truefalse]{</div><div>    color:yellow;</div><div>}</div></div><div><br/></div><div>[attr*=val]    匹配attr属性中包含val值的元素（CSS3中新增属性选择器）</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-name*=c]{</div><div>    color:orange;</div><div>}</div></div><div><br/></div><div>[attr^=val]   匹配attr属性值以val开头的元素（CSS3中新增属性选择器）</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-name^=a]{</div><div>    font-size:26px;</div><div>}</div></div><div><br/></div><div>[attr$=val]    匹配attr属性值以val结束的元素（CSS3中新增属性选择器）</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>div[data-name$=y]{</div><div>     font-weight:bold;</div><div>}</div></div><div><br/></div><div><span style="color: rgb(45, 79, 201);"><br/></span></div><div><span style="color: rgb(45, 79, 201);">css2中的伪类选择：</span></div><div>:link            未被点击的链接</div><div>:visited        已被点击的链接</div><div>:hover         悬停的元素</div><div>:active         点击未释放的元素</div><div>:first-child   匹配第一个子元素</div><div><span style="color: rgb(255, 0, 0);">:first-line     匹配元素中第一行文字，注意该伪元素不适用行内元素</span></div><div><span style="color: rgb(255, 0, 0);">:first-letter   匹配元素中第一个字母，注意该伪元素不适用行内元素</span></div><div>:before        在匹配元素前插入内容</div><div>:after           在匹配元素后插入内容</div><div><br/></div><div><span style="color: rgb(255, 0, 0);">以下为CSS3新增伪类及伪元素选择，伪类一般使用一个冒号，伪元素使用双冒号代表，伪元素代表会在内部创建虚拟元素供选择器所匹配。</span></div><div>:root                选择html元素</div><div>:not(selector)   选择除括号内选择器以外的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>若想进行多次排除，可以适用:not选择器向后附加</div><div>ul li:not(:first-child):not(:last-child):not(:nth-child(3)){</div><div>    font-size:18px;</div><div>}</div><div><span style="color: rgb(50, 135, 18);">//以上代表选择 ul的后代li并且排除第一个子元素、最后一个子元素、第三个子元素</span></div></div><div><br/></div><div>:empty           选择所有为空的p元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>p:empty{</div><div>    width:100px;</div><div>    height:30px;</div><div>    border:solid 1px #ff0000;</div><div>}</div></div><div><br/></div><div>:target             选择href指向的元素，点击并跳转到指定元素后样式生效</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><b>html部分：</b></div><div>&lt;a href=&quot;#div1&quot;&gt;跳转&lt;/a&gt;</div><div>&lt;div id=&quot;div1&quot;&gt;aaaaa&lt;/div&gt;</div><div><br/></div><div><b>css部分：</b></div><div>#div1:target{</div><div>      background:blue;</div><div>      color:#fff;</div><div>      transition:all 2s;</div><div>}</div><div><span style="color: rgb(50, 135, 18);">//注意跳转后要想刷新重试需要在浏览器地址栏中删掉散列标识</span></div></div><div><br/></div><div>:first-child        选择身份是第一个子元素的元素</div><div>:last-child         选择身份是最后一个子元素的元素</div><div><br/></div><div><br/></div><div>:nth-child(index/odd/even/equation)   选择身份是第index个的子元素的元素，（index从1开始，odd奇数、even偶数，equation方程-参见以下n的使用）</div><div>:nth-last-child(index/odd/even/equation )   选择身份是第index个的子元素的元素，（index从最后一个子元素开始，odd奇数、even偶数，equation方程-参见以下n的使用 ）</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><span style="color: rgb(50, 135, 18);">//匹配第二个ul子元素的li子元素从第1行开始间隔1行选择1行</span></div><div>ul:nth-child(2) li:nth-child(2n+1){</div><div>     background:blue;</div><div>}</div><div><br/></div><div><span style="color: rgb(50, 135, 18);">//匹配第二个ul子元素的li子元素最后5行</span><br/></div><div>ul:nth-last-child(1) li:nth-last-child(-n+5){</div><div>     background:blue;</div><div>}</div></div><div><br/></div><div><span style="color: rgb(255, 0, 0);">参数n的使用：</span></div><ul><li><span style="color: rgb(255, 0, 0);"><span style="font-family: Arial;">n:所有的行</span></span></li><li><span style="color: rgb(255, 0, 0);"><span style="font-family: Arial;">n+2:除第1行外所有的行</span></span></li><li><span style="color: rgb(255, 0, 0);"><span style="font-family: Arial;">2n:每2行选择一行</span></span></li><li><span style="color: rgb(255, 0, 0);"><span style="font-family: Arial;">3n:每3行选择一行</span></span></li><li><span style="color: rgb(255, 0, 0);"><span style="font-family: Arial;">2n+4:从第4行开始隔1行选择1行</span></span></li><li><span style="font-family: Arial;"><span style="color: rgb(255, 0, 0);">nth-last-child(-n+3)  选择后三行</span></span></li></ul><div><br/></div><div>:only-child   选择身份是唯一子元素的元素</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div><span style="color: rgb(50, 135, 18);">//选择页面上所有是唯一子元素的span标签</span></div><div>span:only-child{</div><div>    background:red;</div><div>}</div></div><div><br/></div><div>::selection    选择处于选中状态的文本的样式</div><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>p:nth-of-type(1)::selection{</div><div>    background:red;</div><div>    color:#fff;</div><div>    /*-webkit-user-select:none;在chrome中可以设置为没有选中状态*/ </div><div>}</div></div><div><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-radius设置边框圆角</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-radius:1-4 length|% / 1-4 length|%;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">4个值的顺序：左上角  右上角 右下角 左下角</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">”/“分隔符：水平半径/垂直半径</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">box-shadow设置一个或多个阴影框</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：box-shadow:v-shadow h-shadow blur spread color inset;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">v-shadow：水平阴影位置（允许负值）</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">h-shadow：垂直阴影位置（允许负值）</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">blur：阴影模糊距离</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">spread：阴影尺寸</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">color：阴影颜色</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>Inset：将外部阴影改为内部阴影</div></div><div><br/></div></span>
</div></body></html> 